${r'<#assign basePath=request.contextPath />'}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">

	${r"<#include '/common/common-css.html'>"}
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>${description} <small> 列表</small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a href="javascript: location.replace(location.href);">
                                <i class="fa fa-refresh"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                    	<!-- 搜索开始 -->
                    	<div class="row">
                    		<form class="form" role="form">
                    			<div class="form-group col-md-3">
									<label>文本</label>
									<input type="text" class="form-control" name="" id="">
								</div>
								<div class="form-group col-md-3">
									<label>下拉</label>
									<select class="form-control" name="" id="">
										<option value=""></option>
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
									</select>
								</div>
								<div class="form-group col-md-6">
									<label>日期范围</label>
									<div class="input-daterange input-group" id="datepicker">
		                                <input type="text" class="form-control form-date" name="start" id="start" value="" />
		                                <span class="input-group-addon">到</span>
		                                <input type="text" class="form-control form-datetime" name="end" id="end" value="" />
		                            </div>
								</div>
								<div class="form-group col-md-3 col-md-offset-9">
									<a href="javascript:void(0)" class="btn btn-primary pull-right m-l" id="search">搜索</a>
									<input type="reset" class="btn btn-success pull-right " value="清空"/>
								</div>
                    		</form>
                    	</div>
                    	<!-- 搜索结束 -->
                    	
                    	<div class="row">
                    		<div class="col-md-12">
		                        <table id="myTab" class="table table-striped table-bordered table-hover dataTables-example" >
		                            <thead>
		                                <tr>
											<th width="30"><input type="checkbox"></th>
											<th>ID</th>
											<#list list as arr>
											<th>${arr[2]}</th>
											</#list>
											<th>创建时间</th>
											<th>修改时间</th>
											<th width="150">是否锁定</th>
											<th width="200">操作</th>
		                                </tr>
		                            </thead>
		                            <tbody>
		                            </tbody>
		                        </table>
                    		</div>
                    	</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    ${r"<#include '/common/common-js.html'>"}
    <script type="text/javascript">
    
    $(function(){
    	/* 数据表格开始 */
    	table = $('#myTab').DataTable({
    		//数据表格响应式
    		responsive: true,
    		"autoWidth": false,
    		//开启服务器模式
    		"serverSide" : true,
    		//关闭搜索
    		"searching" : false,
    		ajax: {
    	        "url": '${r'${basePath }'}/${entity?uncap_first}/list',
    	        "type" : "POST",
            	"data": function(d) {
					d.pageNum = d.start / d.length; //firstResult
					d.pageSize = d.length; //maxResult
					d.property = d.columns[d.order[0]["column"]].data; //排序字段
					d.direction = d.order[0]["dir"]; //升序降序
					//d.name = $("#name").val();
            	},
    	    },
    	    //设置行号
    	    /* "rowCallback": function (row, data, dataIndex) {
                $('td:eq(1)', row).html(dataIndex + table.page.info().length * table.page() + 1);
            }, */
    	    "order": [[ 1, 'desc' ]], //为了解决第一列checkbox小箭头问题
    	    "columnDefs": [
           		{
                    "defaultContent": "",
                  	"targets": "_all"
                },
                {
   					orderable:false,//禁用排序
   					targets:[0,${noSort},${noSort} + 1] //指定的列
   			 	},
   				{ 
   			 		//为列设置样式
   			 		className: "text-center", 
   			 		"targets": [0]
   				}
            ],	   
    	    columns: [ 
    	    	{
            	    "data": "id",
                    render: function(data) {
                        return '<input type="checkbox" value="'+ data +'" name="">';
                    }
                },
    			{	"data" : "id"	},
    			<#list list as arr>
    			{	"data" : "${arr[1]}"	},
    			</#list>
    			{
    				"data" : "createTime",
    				render: function(data) {
    					if(data){
    						return (new Date(data)).Format("yyyy-MM-dd hh:mm:ss");
    					}
                    }			
    			},
    			{
    				"data" : "editTime",
    				render: function(data) {
	                    if(data){
    						return (new Date(data)).Format("yyyy-MM-dd hh:mm:ss");
    					}
                    }			
    			},
    			{
    				"data" : "status",
    				render : function(data, type, row, meta){
    					if('0' == data){
    						return '<button type="button" class="btn btn-info btn-xs" onclick="lock(this, '+ row.id +', '+ data +')"><i class="fa fa-unlock"></i> 已启用</button>';
    					}else{
    						return '<button type="button" class="btn btn-warning btn-xs"  onclick="lock(this, '+ row.id +', '+ data +')"><i class="fa fa-lock"> 已锁定</button>';
    					}
    				}
    			},
    			{
    				"data" : "id",
    				render : function(data, row){
    					return '<button type="button" class="btn btn-success btn-xs" onclick="edit('+ data +')"><i class="fa fa-edit"></i> 修改</button>' + 
    					'<span style="margin-right: 5px"></span>'+
                        '<button type="button" class="btn btn-danger  btn-xs" onclick="del(this,'+ data +')"><i class="fa fa-remove"></i> 删除</button>';
    				}
    			}
    	    ]
    	});
    	/* 数据表格结束 */
    	
    	/* 按钮和每页显示多少条记录开始 */
    	var btnGroup = $("#myTab_wrapper").find('.row').eq(0).children().eq(1);
    	var lengthChange = $("#myTab_wrapper").find('.row').eq(0).children().eq(0);
    	$(btnGroup).append(
    		'<div class="btn-group">' +
    			'<button class="btn btn-primary btn-sm" type="button" id="add"><span class="glyphicon glyphicon-plus"></span> 添加</button>'+
    			'<button class="btn btn-danger btn-sm" type="button" id="batchDel"><span class="glyphicon glyphicon-trash"></span> 删除</button>'+
    			'<button class="btn btn-info btn-sm" type="button" id="refresh"><span class="fa fa-refresh"></span> 刷新</button>'+
    			'<button class="btn btn-success btn-sm" type="button" id="export"><span class="glyphicon glyphicon-export"></span> 导出</button>' +
    			'<label title="" for="importXls" class="btn btn-primary btn-sm">' +
                    '<input type="file" accept="application/msexcel" name="file" id="importXls" class="hide"><span class="glyphicon glyphicon-import"></span> 导入' +
                '</label>'+
    		'</div>'
    	);
    	$(btnGroup).addClass("col-sm-pull-6");
    	$(lengthChange).addClass("col-sm-push-6");
    	$("#myTab_length").addClass("pull-right");
    	/* 按钮和每页显示多少条记录结束 */
    	
    	/* 刷新数据表格开始 */
    	$("#refresh").on("click", function(){
    		table.ajax.reload();
    	});
    	/* 刷新数据表格结束 */
    	
    	/* 搜索开始 */
    	$("#search").on("click", function(){
    		 table.settings()[0].ajax.data = function(d){
    			d.pageNum = d.start / d.length; //firstResult
    			d.pageSize = d.length; //maxResult
    			d.property = d.columns[d.order[0]["column"]].data; //排序字段
    			d.direction = d.order[0]["dir"]; //升序降序
    			
    			//搜索条件
    		};
       		table.ajax.reload();
    	});
    	/* 搜索结束 */
    	
    	/* 导入开始 */
    	$("#importXls").on("change", function(){
   			var formData = new FormData();
   			formData.append("file", $("#importXls")[0].files[0]);
   			$.ajax({  
		        url: '${r'${basePath }'}/${entity?uncap_first}/importXls' ,  
		        type: 'POST',  
		        data: formData,  
		        async: false,  
		        cache: false,  
		        contentType: false,  
		        processData: false,  
		        success: function (data) { 
		        	if(data.error){
						layer.msg(data.msg,{icon:2,time:1000});
					}else{
						if(data > 0){
							$("#importXls").val('');
							layer.msg('导入'+ data +'条数据',{icon:1,time:1000});
							table.ajax.reload();
							return;
						}
						layer.msg('保存失败',{icon:2,time:1000});
					}
		        },
		        error : function(e){
		        	console.log(e);
		        }
		    }); 
   		});
    	/* 导入结束 */
    	
    	/* 导出开始 */
    	$("#export").on("click",function(){
    		var url = "${r'${basePath }'}/${entity?uncap_first}/export";
    		window.location.href = url;
    	});
    	/* 导出结束 */
    	
    	/* 添加页面开始 */
    	$("#add").on("click", function(){
    		layer.open({
    			type: 2,
    			area: ["30%", "60%"],
    			fix: false, //不固定
    			shadeClose: true, //是否点击遮罩关闭
    			maxmin: true,
    			title: "添加",
    			content: "${r'${basePath }'}/${entity?uncap_first}/add",
    			btn: ['保存', '取消'],
    			yes: function(index){
    				window["layui-layer-iframe" + index].add();
    			}
    		});
    	});
    	/* 添加页面结束 */
    	
    	/* 批量删除开始 */
    	$("#batchDel").on("click", function(){
    		var ids = new Array();
    		$("tbody").find("input:checkbox:checked").each(function(){
    			ids.push($(this).val());
    		});
    		
    		if(ids.length > 0){
    			layer.confirm('确订要删除吗？',function(){
	    			$.ajax({
	    				type: 'POST',
	    				url: "${r'${basePath }'}/${entity?uncap_first}/batchDel",
	    				data: JSON.stringify(ids),
	    				contentType: "application/json; charset=utf-8",
	    				dataType: 'json',
	    				success: function(data){
	    					if(data.error){
	    						layer.msg(data.msg,{icon:2,time:1000});
	    					}else{
	    						if(data > 0){
			    					table.ajax.reload();
			    					layer.msg('批量删除成功!',{icon:1,time:1000});
		    					}else{
		    						layer.msg('批量删除失败!',{icon:2,time:1000});
		    					}
	    					}
	    					
	    					$("thead").find("tr:eq(0)").find("th:eq(0)").find("input:checkbox").removeAttr("checked");
	    				},
	    				error:function(e) {
	    					console.log(e);
	    				}
	    			});
    			});
    		}else{
    			layer.alert("请选择要删除的数据");
    		}
    	});
    	/* 批量删除结束 */
    	
    });
    
    /* 锁定开始 */
    function lock(obj, id, value){
    	var value = "0" == value ? "1" : "0";
    	$.ajax({
			type: 'POST',
			url: '${r'${basePath }'}/${entity?uncap_first}/lock?t=' + Math.random(),
			data : {
				"id" : id,
				"status" : value
			},
			dataType: 'json',
			success: function(data){
				if(data.error){
					layer.msg(data.msg,{icon:2,time:1000});
				}else{
					if('1' == data){
						if('1' == value){
							$(obj).parent().html('<button type="button" class="btn btn-warning btn-xs"  onclick="lock(this , '+ id +', '+ value +')"><i class="fa fa-lock"> 已锁定</button>');
							layer.msg('锁定成功!',{icon:1,time:1000});
						}else{
							$(obj).parent().html('<button type="button" class="btn btn-info btn-xs"  onclick="lock(this, '+ id +', '+ value +')"><i class="fa fa-unlock"> 已启用</button>');
							layer.msg('启用成功!',{icon:1,time:1000});
						}
					}else{
						layer.msg('锁定失败',{icon:2,time:1000});
					}
				}
			},
			error:function(e) {
				console.log(e);
			}
		});		
    }
    /* 锁定结束 */
    
    /* 修改开始 */
    function edit(id){
    	layer.open({
			type: 2,
			area: ["30%", "60%"],
			fix: false, //不固定
			shadeClose: true, //是否点击遮罩关闭
			maxmin: true,
			title: "修改",
			content: "${r'${basePath }'}/${entity?uncap_first}/edit?id=" + id,
			btn: ['保存', '取消'],
			yes: function(index){
				window["layui-layer-iframe" + index].edit();
			}
		});
    }
    /* 修改结束 */
    
    /* 单条删除开始 */
    function del(obj, id){
    	layer.confirm('确定要删除吗？',function(index){
    		$.ajax({
    			type: 'POST',
    			url: '${r'${basePath }'}/${entity?uncap_first}/delete?t=' + Math.random(),
    			data : {"id" : id},
    			dataType: 'json',
    			success: function(data){
    				if(data.error){
						layer.msg(data.msg,{icon:2,time:1000});
					}else{
						if(1 == data){
	    					table.ajax.reload();
	    					layer.msg('删除成功!',{icon:1,time:1000});
	    				}else{
	    					layer.msg('删除失败',{icon:2,time:1000});
	    				}
					}
    			},
    			error:function(e) {
    				console.log(e);
    			}
    		});		
    	});
    }
    /* 单条删除结束 */
    </script>
</body>
</html>
